<template>
  <div id="analysis" class="padding-inner">

    <div class="analysis-box flex">
      <div class="left m-panel-1">
        <Panel panelTitle="冷却水压">
          <div id="pointer_1" style="width: 100%; height: 200px;" class="bg-color"></div>
        </Panel>
      </div>
      <div class="right">
        <Panel panelTitle="冷却水系统水压曲线">
          <div id="curve_1" style="width: 100%; height: 200px;" class="bg-color"></div>
        </Panel>
      </div>
    </div>


    <div class="analysis-box flex">
      <div class="left m-panel-1">
        <Panel panelTitle="冷冻水压">
          <div id="pointer_2" style="width: 100%; height: 200px;" class="bg-color"></div>
        </Panel>
      </div>
      <div class="right">
        <Panel panelTitle="冷冻水系统水压曲线">
          <div id="curve_2" style="width: 100%; height: 200px;" class="bg-color"></div>
        </Panel>
      </div>
    </div>
  </div>
</template>

<script>
import Panel from '@/components/base/Panel.vue';
export default ({
  name: 'Analysis',
  components: {
    Panel,
  },
  data() {
    return {

    }
  },
  mounted() {
    this.drawPointer()
    this.drawCurve()
  },
  methods: {
    drawPointer() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pointer_1'))
      let myChart2 = this.$echarts.init(document.getElementById('pointer_2'))

      // 绘制图表
      // 指定图表的配置项和数据
      let option = {
        series: [
          {
            type: 'gauge',
            min:0.1,
            max:1,
            splitNumber:10,
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'inherit'
              }
            },
            axisTick: {
              distance: -30,
              length: 15,
              lineStyle: {
                color: '#e3f2fe',
                width: 2
              }
            },
            splitLine: {
              distance: -20,
              length: 20,
              lineStyle: {
                color: '#e3f2fe',
                width: 3
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 26,
              fontSize: 7
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} Mpa',
              color: 'inherit',
              fontSize: 7
            },
            data: [
              {
                value: 0.2
              }
            ]
          }
        ]
      };
      setInterval(function () {
        myChart.setOption({
          
          series: [
            {
              data: [
                {
                  value: +(Math.random() * 0.7).toFixed(2)
                }
              ]
            }
          ]
        });
      }, 2000);


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart2.setOption(option);

    },
    drawCurve() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('curve_1'))
      let myChart2 = this.$echarts.init(document.getElementById('curve_2'))

      var option = {
        title: {
          text: '',
          color: '#e3f2fefff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#3b72ee'
            }
          }
        },
        legend: {
          data: [ '功耗', '制冷']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
        
          {
            name: '功耗',
            type: 'line',
            
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '制冷',
            type: 'line',
            
            data: [150, 100, 151, 154, 190, 310, 210,150, 100, 151, 154, 190, 310, 210,150, 100, 151, 154, 190, 310, 210]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart2.setOption(option);

    }

  }
})
</script>

<style scoped lang="less" >
#analysis {
  
  .analysis-box {
    
    .left {
      
      width: 30%;
      // height: 230px;
      // background-color: red;
      
    }

    .right {
      // background-color: #e3f2fe;
      width: 70%;
    }
  }
}
</style>